<template>
    <el-row>
        <el-col :span="24">
            <el-scrollbar>
                <div class="scrollbar-flex-content">
                  <p v-for="item in cars" :key="item" class="scrollbar-demo-item"  @click="toggleSelection('manufacturers', item)">
                    {{ item }}
                  </p>
                </div>
              </el-scrollbar>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="7"><div class="grid-content ep-bg-purple" />
            <el-row>
                <el-col :span="8">
                    <div class="left-section">
                        <div class="chart-title"  style="text-align: center;" >汽车月份销量图</div>
                        <div class="chart-container">
                            <leftupView :childData2="parentData2" />
                        </div>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <div class="left-section">
                        <div class="chart-title">占比图</div>
                        <div class="chart-container">
                            <leftdownView  :childData3="parentData3" />
                        </div>
                    </div>
                </el-col>
            </el-row>
        </el-col>
        <el-col :span="10">
            <el-row>
                <el-col :span="24">
                    <el-scrollbar>
                        <div class="scrollbar-flex-content">
                          <p v-for="item in cars2" :key="item" class="scrollbar-demo-item" @click="findManufacturerById( item.id)" >
                            {{ item.carname }}
                          </p>
                        </div>
                      </el-scrollbar>
                </el-col>
            </el-row>
            <el-row>
                <div class="carname" style="margin-left: 15%;">
                    {{ selectedCarName }}
                </div>
            <div class="upper-section"  style="margin-left: 5%;" >
                <el-date-picker
                  v-model="selectedDateRange"
                  type="monthrange"
                  range-separator="到"
                  start-placeholder="起始月份"
                  end-placeholder="截至月份"
                  unlink-panels
                  @change="handleDateChange" 
                />
              </div>    
            </el-row>
            <el-row>
            <div class="middle-section">
                <div class="chart-title" style="margin-left: 45%;"  >地区销量详情</div>
                <div class="map-container" style="padding-top: 10% ;padding-left: 10%;">
                    <mapView :childData4="parentData4"/>
                </div>
            </div>
        </el-row>
        </el-col>
        <el-col :span="7">
            <el-row>
                <el-col :span="24">
                    <div class="right-up">
                        <div class="chart-title" style="text-align: center;" >汽车常见问题</div>
                        <div class="chart-container" id="rightupView">
                            <rightupView :childData1="parentData1" />
                        </div>
                    </div>

                </el-col>
              </el-row>

              <el-row>
                <el-col :span="8">
                    <div class="right-down">
                        <div class="price-title">评论词云图</div>
                        <div class="chart-container" id="rightdownView" >
                            <rightdownView :childData5="parentData1" />
                        </div>
                    </div>

                </el-col>
              </el-row>
        </el-col>
      </el-row>
</template>


<script setup>
import axios from 'axios'
import { ref, onMounted } from 'vue'
import leftupView from './shows/leftupView.vue'
import leftdownView from './shows/leftdownView.vue'
import mapView from './shows/mapView.vue'
import rightupView from './shows/rightupView.vue'
import rightdownView from './shows/rightdownView.vue'
const cars = ref([])
// 在 manufacturers 中查找具有特定字段值的对象
const cars2 = ref([])
const parentData1 = ref([])
const parentData2 = ref([])
const parentData3 = ref([])
const parentData4 = ref([])
// const parentData5 = ref([])
const selectedCarName = ref('')
function findManufacturerById(id) {
    parentData1.value = []
    const manufacturer = cars2.value.find(cars2 => cars2.id === id);
    if (manufacturer) {
        // 将找到的数据添加到 manufacturers2 中
        parentData1.value.push(manufacturer);
        selectedCarName.value = manufacturer.carname;
    }
}
const fetchData = async (data) => {
  try {
    // 构造请求体，包含起止日期
    const response = await axios.post('http://127.0.0.1:8000/car/api/show/get_carmsg/', data, {
      headers: {
        'Content-Type': 'application/json'
      }
    });
    cars2.value = response.data.car_msg;
  } catch (error) {
    console.error('Error fetching data', error);
  }
}
function toggleSelection(key, value) {
    // 构建要传递给后端的数据对象
    const data = {
        [key]: value
    };
    // 调用sendDataToBackend函数发送数据到后端
  fetchData(data);
}
const getautomobile = async () => {
  try {
    // 构造请求体，包含起止日期
    const response = await axios.post('http://127.0.0.1:8000/car/api/show/getautomobile/', {

    }, {
      headers: {
        'Content-Type': 'application/json' }
    });
    cars.value = response.data.manufacturers;
  } catch (error) {
    console.error('Error fetching data', error);
  }
}

const handleDateChange = async () => {
  await getSalesData(selectedCarName); // 在日期选择完成后调用 fetchData 函数
}
const selectedDateRange = ref([])
const getSalesData = async (carname) => {
  try {
    const startDate = selectedDateRange.value[0];
    const endDate = selectedDateRange.value[1];
    // 构造请求体，包含起止日期
    const response = await axios.post('http://127.0.0.1:8000/car/api/show/getsalesdata/', {
    start_date: startDate ? startDate.toISOString().split('T')[0] : '', // 转换为 ISO 日期字符串
    end_date: endDate ? endDate.toISOString().split('T')[0] : '',
    carname:carname
    }, {
      headers: {
        'Content-Type': 'application/json'
      }
    });
    // 将后端返回的数据存储到 parentData1 中
    parentData2.value = response.data.get_year_sales_data;
    parentData3.value = response.data.getcarnamedata;
    parentData4.value = response.data.sales_by_year;
    // parentData5.value = response.data.keywords;
   
  } catch (error) {
    console.error('Error fetching data', error);
  }
}
// 组件挂载时立即获取数据
onMounted(async () => {
  await getautomobile(); // 组件挂载后立即获取数据
});
</script>


<style lang="scss">
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.scrollbar-flex-content {
    display: flex;
  }
  .scrollbar-demo-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 50px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
    background: var(--el-color-danger-light-9);
    color: var(--el-color-danger);
  }


</style>